<!--
 * @Description: 
 * @Version: 1.0
 * @Author: wenbin
 * @Date: 2021-09-15 10:10:08
 * @LastEditors: wenbin
 * @LastEditTime: 2021-11-16 14:28:27
 * @FilePath: /vite-ts-vue3-test/src/App.vue
 * Copyright (C) 2021 wenbin. All rights reserved.
-->
<template>
  <div id="app" style="height: 100%; width: 100%">
    <magus-layout :headerInfo="headerInfo" v-if="$route.meta.isNeedLayout && !poweredByQiankun">
      <router-view />
    </magus-layout>
    <div style="height: 100%; width: 100%" v-else>
      <router-view />
      <!-- <div style="width: 100%; height: 100%;" id="qiankun-vue"></div> -->
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, onMounted, getCurrentInstance } from 'vue';
  // import { useRoute } from 'vue-router';
  import { useStore } from 'vuex';
  import dictsApi from './api/dicts';
  // import logoUrlDefault from './assets/image/logo.png';
  export default defineComponent({
    name: 'App',
    components: {},
    setup() {
      const store = useStore();
      // const route = useRoute();
      const { proxy }: any = getCurrentInstance();
      const state: { poweredByQiankun: boolean; headerInfo: any } = reactive({
        poweredByQiankun: false,
        headerInfo: {
          imgUrl: '',
          // 没有图片显示文字
          logoText: 'MagusCloud',
          // logo详细描述
          logoDetail: '上海麦杰科技股份有限公司',
          // 一级菜单
          menuList: [],
        },
      });
      const methods = {
        getMenu() {
          store.dispatch('GET_MENU_LIST', proxy.$magusCloudApi).then((res) => {
            state.headerInfo.menuList = res.data;
          });
        },
        /**
         * @description: 获取字典
         * @param {*}
         * @return {*}
         */

        getDictionary() {
          proxy.$magusCloudApi.apiConfig.get(dictsApi.getDictCatch).then((res: any) => {
            proxy.$magusCloudApi.catchUtil.setLocalItem('dictionary', JSON.stringify(res));
          });
        },
      };
      onMounted(() => {
        state.poweredByQiankun = window.__POWERED_BY_QIANKUN__;
        if (!window.__POWERED_BY_QIANKUN__) {
          methods.getMenu();
          methods.getDictionary();
        }
      });
      return {
        // route,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style lang="scss" scoped>
  html,
  body {
    width: 100%;
    height: 100%;
  }

  #app {
    width: 100%;
    height: 100%;
  }
</style>
